<template>
    <div>
        <div class="work-atten">
            <div>
                <a-select class="work-atten-input" :options="deptSelectOption" v-model:value="deptValue"></a-select>
                <a-select class="work-atten-input" :options="options" v-model:value="selectData"
                    @change="handleSelectChange"></a-select>
                <a-date-picker class="work-atten-input" v-model:value="month" valueFormat="YYYY-MM"
                    :picker="pikerMode" />
                <a-button class="work-atten-button" @click="reseat">重置</a-button>
                <a-button class="work-atten-button" type="primary" @click="search">查询</a-button>
                <a-button class="work-atten-button" type="primary" @click="exportData">导出</a-button>
            </div>
        </div>
        <div class="work-atten">
            <a-table :loading="loading" :columns="columns" :data-source="dataSource" :scroll="{ x: scrollx }"
                :pagination="pagination" @change="handlePageChage" bordered>
            </a-table>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { onMounted, ref, computed } from 'vue';
import { list,listAll ,getExportUrl} from './attendanceReport.api';
import { useMethods } from '/@/hooks/system/useMethods';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const { handleExportXls, handleImportXls } = useMethods();
let selectData = ref(1);
let month = ref(null)
let pikerMode = ref('month');
const deptSelectOption = ref([]);//部门下拉数据源
const deptValue = ref(null);//部门选择的数据
let loading = ref(false);
let scrollx = ref(1000)

const pagination = ref({
    current: 1,
    total: 1,
    pageSize: 10,
    pageSizeOptions:['10', '20', '30', '40', '50'],
    showSizeChanger:true
})
const options = ref([
    {
        value: 1,
        label: '月份',
    },
    {
        value: 2,
        label: '年份',
    }
])
const dataSource = ref([])//接口数据
const columns = ref([]);//表格的表头
onMounted(async () => {
    let result = await getDeptList();
    deptSelectOption.value = result;
    initData();
    queryData();
})
const initData = () => {
    pikerMode.value = 'month';
    if (deptSelectOption.value && deptSelectOption.value.length) {
        deptValue.value = deptSelectOption.value[0].value;
    }
    selectData.value = 1;
    month.value = dayjs();
}
const exportData = () => {
    let mouthData = "", dateType = 1
    if (pikerMode.value == 'month') {
        mouthData = dayjs(month.value)
        dateType = 1;
    } else {
        mouthData = dayjs(month.value);
        dateType = 2;
    }
    handleExportXls("人员夜班考勤时长", getExportUrl, {
        orgCode: deptValue.value,
        queryDate: mouthData,
        dateType,
        queryType:2,//夜班
    })
}
/**
 * 处理表头数据
 */
const handleColoum = () => {
    //月份
    if (selectData.value == 1) {
        //获取选择月的天数生成coloum字段
        let key = dayjs(month.value).daysInMonth() // 31
        let coloumData = []

        for (let i = 1; i <= key; i++) {
            coloumData.push(
                {
                    title: i + '号',
                    dataIndex: 'day' + i,
                    width: '140px',
                    align: 'center'
                }
            )

        }
        coloumData.unshift({
            title: `姓名 ${'\\'} 日期`,
            dataIndex: 'realname',
            width: '140px',
            align: 'center',
            fixed: 'left'
        })
        coloumData.push({
            title: `总数`,
            dataIndex: 'sumCount',
            width: '140px',
            align: 'center',
            fixed: 'right'
        })
        scrollx.value = (140 * (key + 2)) + 'px';
        columns.value = coloumData;
    } else {
        //生成coloum字段
        let coloumData = []
        for (let i = 1; i <= 12; i++) {
            coloumData.push(
                {
                    title: i + '月',
                    dataIndex: 'month' + i,
                    width: '140px',
                    align: 'center'
                }
            )
        }
        coloumData.unshift({
            title: `姓名 ${'\\'} 月份`,
            dataIndex: 'realname',
            width: '140px',
            align: 'center',
            fixed: 'left'
        })
        coloumData.push({
            title: `总数`,
            dataIndex: 'sumCount',
            width: '140px',
            align: 'center',
            fixed: 'right'
        })
        scrollx.value = (140 * 14) + 'px';
        columns.value = coloumData;
    }
}
const handlePageChage = (page, size) => {
    pagination.value.current = page.current;
    pagination.value.pageSize = page.pageSize;
    console.log(page, size);

    queryData()

}
/**
 * 查询数据
 */
const queryData = async () => {
    loading.value = true
    console.log("部门", deptValue.value)
    console.log("时间", month.value)

    let mouthData = "",dateType = 1
    if(pikerMode.value == 'month'){
        mouthData = dayjs(month.value)
        dateType = 1;
    }else{
        mouthData = dayjs(month.value);
        dateType = 2;
    }
    let result = await list({
        orgCode: deptValue.value,
        queryDate: mouthData,
        dateType,
        queryType:2,//夜班
        pageNo:pagination.value.current,
        pageSize:pagination.value.pageSize,
    });
    console.log("result===",result);
    
    handleColoum();
    console.log(columns.value)
    //TODO 请求接口
    dataSource.value = result.records;
    pagination.value.total = result.total;
    loading.value = false
}
//TODO 替换接口
const getDeptList = async() => {
    let result = await listAll();
    result = result.filter(item =>{
        return item.izLeaf !=0  && userStore.getLoginInfo?.userInfo?.orgCode == item.orgCode
    })
    let data = result.map(item => {
            return {
                label: item.departName,
                value: item.orgCode
            }
    })
    return data
}
/**
* select 的值变化函数
* @param v 
*/
const handleSelectChange = (v) => {
    console.log(v);
    if (v == 1) {
        pikerMode.value = 'month'
    } else {
        pikerMode.value = 'year'
    }
}
/**
 * 重置
 */
const reseat = () => {
    initData();
    queryData();
}
/**
 * 查询
 */
const search = () => {
    queryData();
}
</script>

<style lang="less" scoped>
html[data-theme='dark'] {
    .work-atten {
        background-color: #000;
    }
}

.work-atten {
    padding: 20px;
    background-color: #fff;

    &-input {
        margin-right: 20px;
        width: 200px;
    }

    &-button {
        margin-right: 20px;
    }

    .charts-div {
        margin-top: 40px;
    }

    .flex-div {
        display: flex;

        .flex-div-item {
            flex: 1;
        }
    }
}
</style>